<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../css/swiper-4.3.5.min.css">
    <link rel="stylesheet" href="../css/element.css">
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" href="../css/person_center/person_center.css">
    <title>会员中心-个人设置</title>
    <style>
        .avatar-uploader .el-upload,.avatar{
            width: 80px;
            height: 80px;
        }
        .avatar-uploader-icon{
            width: 80px;
            height: 80px;
            line-height: 80px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <headers></headers>
        <!-- search -->
        <div class="search wrap">
            <logo></logo>
            <div class="header_tit fl"></div>
            <searchs></searchs>

            <car_box></car_box>

        </div>
        <div class="wrap person_center">
            <!-- nav -->
            <div class="nav_box fl">
                <div id="subapp" v-cloak>
                    <div class="person_nav fl">
                        <ul>
                            <li @click='person_order'>首页</li>
                            <li @click='person_center'>我的订单</li>
                            <li @click='person_address'>收货地址</li>
                            <li @click='person_exchange_page'>积分换货</li>
                            <li @click='person_intergal'>积分订单</li>
                            <li @click='person_collection'>我的收藏</li>
                            <li @click='person_foot'>浏览足迹</li>
                            <li @click='person_ticket'>优惠券</li>
                            <li class="active">个人设置</li>
                            <li @click='person_message'>消息中心</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="right_box fl">
                <div class="set_up">
                    <div class="set_item">
                        <div class="set_tit fl">
                            当前头像：
                        </div>
                        <el-upload class="avatar-uploader person_head fl" action="http://39.105.19.58:8092/xmsc/upload/singleUploadImg"
                            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <img v-if="viaUrl" :src="viaUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                    <div class="set_item ">
                        <div class="set_tit fl  name_lineheight">
                            用户名：
                        </div>
                        <input type="text" class="set_input" v-model='nickname'>
                    </div>
                    <div class="set_item">
                        <div class="set_tit name_lineheight fl">
                            手机号：
                        </div>
                        <div class="phone_num fl">
                            <input type="text" class="set_input" v-model='phone'>
                            <!-- <span class="phone_btn">修改</span> -->
                        </div>
                    </div>
                    <!-- <div class="set_item">
                        <div class="set_tit fl">
                            性别：
                        </div>
                        <div class="phone_num fl">
                            <el-radio v-model="radio" label="1">男</el-radio>
                            <el-radio v-model="radio" label="2">女</el-radio>
                        </div>
                    </div> -->
                    <div class="set_item">
                        <div class="set_tit name_lineheight fl">
                            邮箱：
                        </div>
                        <input type="text" class="set_input" v-model='mail'>
                        <!-- <div class="phone_num fl">
                            <span class="phone_btn no_margin">修改</span>
                        </div> -->
                    </div>
                    <div class="set_item">
                        <div class="set_tit fl">
                            密码：
                        </div>
                        <!-- <input type="text" class="set_input" v-model='password'> -->
                        <div class="phone_num fl">
                            <a href="../login_register/change_password.html" class="phone_btn no_margin cursor">修改密码</a>
                        </div>
                    </div>

                    <div class="info_btn cursor" @click='updateUser'>保存</div>
                </div>
            </div>


        </div>





        <div class="wrap clear_both">
            <productfooter></productfooter>
        </div>
    </div>

    <script src="../js/axios.js"></script>
    <script src="../js/qs.js"></script>
    <script src="../js/swiper-4.3.5.min.js"></script>
    <script src="../js/browser.min.js"></script>
    <script src="../js/vue.js"></script>
    <script src="../js/element.js"></script>
    <script src="../js/main.js"></script>
    <script type="text/babel">
        var app = new Vue({
            el: '#app',
            data() {
                return {
                    address:4,
                    input10:'',
                    input11:'',
                    add_popup:false,
                    car_active:false,groups:3,
                    radio:'',
                    info:'',
                    nickname:'',
                    phone:'',
                    mail:'',
                    viaUrl:'',
                    password:'',
                    imageUrl:''
                };
            },
            created() {
                
            },
            mounted() {
                this.getUserByToken()
            },
            methods: {
                handleAvatarSuccess(res, file) {
                    this.viaUrl = res.data.imgUrl
                    console.log(res)
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type === 'image/jpeg';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                    }
                    if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                
                // 修改
                updateUser(){
                    axios({
                        method:"POST",
                        url:base_url + "/user/updateUser",
                        data:Qs.stringify({
                            viaUrl:this.viaUrl,
                            nickname:this.nickname,
                            phone:this.phone,
                            mail:this.mail,
                            // password:this.password
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        if (res.data.code==1) {
                            app.$message.success('保存成功')
                            app.getUserByToken()
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },
                // 获取个人信息
                getUserByToken(){
                    axios({
                        method:"POST",
                        url:base_url + "/user/getUserByToken",
                        data:Qs.stringify({
                        }),
                        headers:{
                            'Content-Type':'application/x-www-form-urlencoded',
                            "TOKEN":localStorage.getItem('wACCESS_TOKEN')
                        }
                    })
                    .then(function (res) {
                        console.log(res.data.data.info)
                        app.info = res.data.data.info
                        app.nickname = res.data.data.info.nickname
                        app.phone = res.data.data.info.phone
                        app.mail = res.data.data.info.mail
                        app.viaUrl = res.data.data.info.viaUrl
                        app.person_infos = false
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
                },

                // 显示购物车               
                go_shop_car(){                     
                    window.location.href='../product/shop_car.html'  
                },
                car_box(){
                    this.car_active = !this.car_active
                },
                person_order(){
                    window.location.href='person_order.html'
                },
                person_address(){
                    window.location.href='person_address.html'
                },
                person_exchange_page(){
                    window.location.href='person_exchange_page.html'
                },
                person_center(){
                    window.location.href='person_center.html?index='+0
                },
                person_intergal(){
                    window.location.href='person_integral_order.html'
                },
                person_collection(){
                    window.location.href='person_collection.html'
                },
                person_ticket(){
                    window.location.href='person_ticket.html'
                },
                person_message(){
                    window.location.href='person_message.html'
                },
                person_foot(){
                    window.location.href='person_footprint.html'
                }
            }
        })
        
    </script>
</body>

</html>